<template>
  <div class="home">
    <AppLayout>
  <!-- <el-header class="header">
    <div class="logo">
      <img src="@/assets/logo.png" alt="Logo">
    </div>
    <div class="nav-menu">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        background-color="transparent"
        text-color="#333"
        active-text-color="#409EFF"
        @select="handleSelect"
      >
        <el-menu-item index="1">处理中心</el-menu-item>
      <el-menu-item index="2">处理中心</el-menu-item>
        <el-menu-item index="3" disabled>消息中心</el-menu-item>
        <el-menu-item index="4">订单管理</el-menu-item>
      </el-menu>
    </div>
  </el-header> -->
    <!-- 在这里添加更多的导航项 -->
  <!-- <el-menu class="custom-nav" mode="horizontal"  text-color="#333" active-text-color="#409EFF">
    <el-menu-item index="1"><h4>首页</h4></el-menu-item>
    <el-menu-item index="2"><h4>项目介绍</h4></el-menu-item>
    <el-menu-item index="3"><h4>项目</h4></el-menu-item>
      </el-menu> -->
    <!-- 导航栏
    <div class="daohang">
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
  <el-menu-item index="1">处理中心</el-menu-item>

  <el-menu-item index="2">预约中心</el-menu-item>
  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
</el-menu>
</div> -->

<!-- <nav class="navbar navbar-default">
        <div class="container">

           移动端导航图标 -->
            <!-- <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
	        <span class="sr-only">Toggle navigation</span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	      </button>
                <a class="navbar-brand" href="#">电子医疗管理系统</a>
            </div>  -->
            <!-- 导航-->
            <!-- <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="index.html" class="active">首页 <span class="sr-only"></span></a></li>
                    <li><a href="about.html">关于我们</a></li>
                    <li><a href="news.html">医疗动态</a></li>
                    <li><a href="resource.html">医疗资源</a></li>
                    <li><a href="contact.html">联系我们</a></li>
                </ul>
            </div> -->
        <!-- </div>
    </nav> -->
    <!--幻灯片-->
    <!-- <div id="hwslider" class="hwslider">
        <ul>
            <li><a><img src="../../public/static/images/banner-1.jpg" /></a></li>
            <li><a><img src="../../public/static/images/banner-2.jpg" /></a></li>
        </ul>
    </div> -->
<!--  <div class="block text-center">-->
<!--  <el-carousel indicator-position="outside" height="800px">-->
<!--    <el-carousel-item v-for="item in imgList" :key="item" class="image-container">-->
<!--         <img :src="item.idView" class="full-size-image">-->
<!--    </el-carousel-item>-->
<!--  </el-carousel>-->
<!--  </div>-->
    <div class="service">
        <div class="container p50">
            <div class="row">
                <div class="col-md-12 title">
                    <h2>我们的服务</h2>
                    <div class="line"></div>
                </div>
                <div class="col-md-4 col-sm-6 col-xs-12">
                    <div class="ser-item">
                        <div class="service-icon">
                            <span class="fa fa-heartbeat service-icon-effect"></span>
                        </div>
                        <h3><a href="#">心脏监测</a></h3>
                        <p>XXX的通道有许多变化，但大多数人以某种形式遭受了改变，通过注射幽默</p>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 col-xs-12">
                    <div class="ser-item">
                        <div class="service-icon">
                            <span class="fa fa-stethoscope service-icon-effect"></span>
                        </div>
                        <h3><a href="#">康复治疗</a></h3>
                        <p>XXX的通道有许多变化，但大多数人以某种形式遭受了改变，通过注射幽默</p>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 col-xs-12">
                    <div class="ser-item">
                        <div class="service-icon">
                            <span class="fa fa-h-square service-icon-effect"></span>
                        </div>
                        <h3><a href="#">医疗保健</a></h3>
                        <p>XXX的通道有许多变化，但大多数人以某种形式遭受了改变，通过注射幽默</p>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 col-xs-12">
                    <div class="ser-item">
                        <div class="service-icon">
                            <span class="fa fa-medkit service-icon-effect"></span>
                        </div>
                        <h3><a href="#">背景调查</a></h3>
                        <p>XXX的通道有许多变化，但大多数人以某种形式遭受了改变，通过注射幽默</p>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 col-xs-12">
                    <div class="ser-item">
                        <div class="service-icon">
                            <span class="fa fa-user-md service-icon-effect"></span>
                        </div>
                        <h3><a href="#">特殊医生</a></h3>
                        <p>XXX的通道有许多变化，但大多数人以某种形式遭受了改变，通过注射幽默</p>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 col-xs-12">
                    <div class="ser-item">
                        <div class="service-icon">
                            <span class="fa fa-ambulance service-icon-effect"></span>
                        </div>
                        <h3><a href="#">24小时服务</a></h3>
                        <p>XXX的通道有许多变化，但大多数人以某种形式遭受了改变，通过注射幽默</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--选择我们 -->
    <div class="choose p50">
        <div class="container">
            <div class="row">
                <div class="col-md-12 title">
                    <h2>为什么选择我们</h2>
                    <div class="line"></div>
                </div>
                <div class="col-md-5 col-sm-12 col-xs-12 p30">
                    <img src="./static/images/choose-us-img1.jpg" />
                </div>
                <div class="col-md-7 col-sm-12 col-xs-12 p30 c-show">
                    <div class="row">
                        <div class="col-md-2 col-sm-2">
                            <a href="#" class="media-icon">
                <span class="fa fa-hospital-o"></span>
              </a>
                        </div>
                        <div class="col-md-10 col-sm-10 clearfix c-w">
                            <h3 class="">先进的医疗设备</h3>
                            <p>先进的医疗设备先进的医疗设备先进的医疗设备先进的医疗设备先进的医疗设备先进的医疗设</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-2 col-sm-2 ">
                            <a href="#" class="media-icon">
                <span class="fa fa-user-md"></span>
              </a>
                        </div>
                        <div class="col-md-10 col-sm-10 clearfix c-w">
                            <h3 class="">专业的医疗团队</h3>
                            <p>专业的医疗团队专业的医疗团队专业的医疗团队专业的医疗团队专业的医疗团队专业的医疗团</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-2 col-sm-2">
                            <a href="#" class="media-icon">
                <span class="fa fa-ambulance"></span>
              </a>
                        </div>
                        <div class="col-md-10 col-sm-10 clearfix c-w">
                            <h3 class="">紧急支援</h3>
                            <p>紧急支援紧急支援紧急支援紧急支援紧急支援紧急支援紧急支援紧急支援紧急支援紧急支援紧</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--数据-->
    <div class="counters p50 clearfix">
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-sm-6 col-xs-6">
                    <div class="counter-box">
                        <div class="counter-no counter">
                            200
                        </div>
                        <div class="counter-label">医疗人员</div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-6">
                    <div class="counter-box">
                        <div class="counter-no counter">
                            300
                        </div>
                        <div class="counter-label">诊所病房</div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-6">
                    <div class="counter-box">
                        <div class="counter-no counter">
                            350
                        </div>
                        <div class="counter-label">医疗设备</div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-6">
                    <div class="counter-box">
                        <div class="counter-no counter">
                            700
                        </div>
                        <div class="counter-label">康复病人</div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!--新闻资讯-->
    <div class="news p50">
        <div class="container">
            <div class="row">
                <div class="col-md-12 title">
                    <h2>新闻资讯</h2>
                    <div class="line"></div>
                </div>
                <div class="col-md-4 col-sm-12 clearfix">
                    <div class="single-Blog">
                        <div class="single-blog-left">
                            <ul class="blog-comments-box">
                                <li>五月
                                    <h2>02</h2>2017</li>
                                <li><span class="fa fa-eye"></span>1523</li>
                            </ul>
                        </div>
                        <div class="single-blog-right">
                            <div class="blog-img">
                                <figure class="blog-figure">
                                    <a href="news - show.html"><img src="./static/images/choose-us-img3.jpg" alt="img"></a>
                                    <span class="image-effect"></span>
                                </figure>
                            </div>
                            <div class="blog-author">
                                <p>作者：<span>李博士</span></p>
                            </div>
                            <div class="blog-content">
                                <h3>医疗牙科部门最新趋势</h3>
                                <p>XXX的通道有许多变化，但大部分人以某种形式遭受改变，注入幽默，或者看起来不太可信的随机词。</p>
                                <div class="more">
                                    <a href="news - show.html" data-hover="Read More"><span>阅读更多</span></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 col-sm-12 clearfix">
                    <div class="single-Blog">
                        <div class="single-blog-left">
                            <ul class="blog-comments-box">
                                <li>五月
                                    <h2>02</h2>2017</li>
                                <li><span class="fa fa-eye"></span>1523</li>
                            </ul>
                        </div>
                        <div class="single-blog-right">
                            <div class="blog-img">
                                <figure class="blog-figure">
                                    <a href="news - show.html"><img src="./static/images/choose-us-img3.jpg" alt="img"></a>
                                    <span class="image-effect"></span>
                                </figure>
                            </div>
                            <div class="blog-author">
                                <p>作者：<span>李博士</span></p>
                            </div>
                            <div class="blog-content">
                                <h3>医疗牙科部门最新趋势</h3>
                                <p>XXX的通道有许多变化，但大部分人以某种形式遭受改变，注入幽默，或者看起来不太可信的随机词。</p>
                                <div class="more">
                                    <a href="news - show.html" data-hover="Read More"><span>阅读更多</span></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-12 ">
                    <div class="single-Blog">
                        <div class="single-blog-left">
                            <ul class="blog-comments-box">
                                <li>五月
                                    <h2>02</h2>2017</li>
                                <li><span class="fa fa-eye"></span>1523</li>
                            </ul>
                        </div>
                        <div class="single-blog-right">
                            <div class="blog-img">
                                <figure class="blog-figure">
                                    <a href="news - show.html"><img src="./static/images/choose-us-img3.jpg" alt="img"></a>
                                    <span class="image-effect"></span>
                                </figure>
                            </div>
                            <div class="blog-author">
                                <p>作者：<span>李博士</span></p>
                            </div>
                            <div class="blog-content">
                                <h3>医疗牙科部门最新趋势</h3>
                                <p>XXX的通道有许多变化，但大部分人以某种形式遭受改变，注入幽默，或者看起来不太可信的随机词。</p>
                                <div class="more">
                                    <a href="news - show.html" data-hover="Read More"><span>阅读更多</span></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--尾部-->
    </AppLayout>
  </div>

</template>

<script>
// @ is an alias to /src
import { reactive } from "vue";
// import HelloWorld from '@/views/HomeView.vue'
import "./static/css/reset.css"
import "./static/css/hwslider.css"
import "./static/css/style.css"
import AppLayout from './Layout1.vue';
export default {
  name: 'HomeView',
  components: {
    AppLayout,
  },
  data() {
    return {
      imgList: [
        { id: 0, idView: require('./static/images/banner-1.jpg' )},
        { id: 1, idView: require('./static/images/banner-2.jpg') },
      ],
    // activeIndex: '1',
    };
  },
   methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  },

}
</script>


<style scoped>

.image-container {
  width: 100%;
  height: 100%;
  /* 确保div会填满el-carousel-item的大小 */
}

.full-size-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 使用cover以确保图片填满整个区域，但可能会被裁剪 */
  /* 如果你不希望图片被裁剪，可以使用object-fit: contain，并且可能会有空白边缘 */
  display: block; /* 这可以去除图片底部可能出现的空间 */
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

.header {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  padding-right: 200px;
  align-items: center;  /* 确保项目垂直居中 */
  border: none;
}

.logo {
  padding-left: 20px;
}

.logo img {
  /* 设置图片的宽度和高度 */
  width: 50px; /* 例如，将图片的宽度设置为400像素 */
  height: auto; /* 设置高度为auto，以保持图片的宽高比 */
  margin-left: 800px;
}

.nav-menu {
  margin-left: auto; /* 这会推动导航菜单到右边 */
  transform: translateX(-400px); /* 向左移动导航栏200px */
}

.el-menu-demo {
  background-color: transparent;
  border: none;
}

/* If you want to customize the menu items further */

.carouseimagel {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 可以设置为 'cover', 'contain', 'fill' 等值，根据需要选择 */
}
</style>
